<template id="VehicleTable">
  <div class="VehicleTable">
    <VehiceleCom />
    <div class="carManag">
      <p class="">园区车辆分类管理</p>
      <timeInput class="publicinput" :option="options" @changeTime="timeDate" />
    </div>
    <div class="park">
      <div v-for="(item, i) in listCar">
        <ParkCar
          :listCar="item.value"
          :rylistCar="item.car_in_num"
          :cylistCar="item.car_out_num"
          :parkcarId="'carId1' + i"
        />
        <p>{{ item.name }}</p>
      </div>
      <!-- <div>
          <ParkCar :listCar="listCar[1].value" :parkcarId="carId2" />
          <p>临时车辆</p>
        </div>
        <div>
          <ParkCar :listCar="listCar[2].value" :parkcarId="carId3" />
          <p>白名单车辆</p>
        </div>
        <div>
          <ParkCar :listCar="listCar[3].value" :parkcarId="carId4" />
          <p>危化品车辆</p>
        </div> -->
    </div>
    <el-divider></el-divider>
    <div class="manageorLsit" style="width: 100%">
      <div style="width: 100%">
        <div style="display: flex; justify-content: space-between " class="carManag">
          <p>园区各单位车辆管理</p>
          <timeSingleInput class="publicinput bigscreen" @changeTime1="timeDate1" />
        </div>
        <parkdwCar
          :linedataMore="linedataMore"
          v-if="linedataMore.length"
          style="width: 100%"
        />
        <div
          v-if="!linedataMore.length"
          style="
            width: 100%;
            min-height: 8vw;
            line-height: 8vw;
            text-align: center;
            color: #fff;
          "
        >
          数据加载中...
        </div>
      </div>
      <!-- <parkdwList
        style="width:50%"
          class="indexList"
          :list="listdata"
          :loadstatus="false"
          :topData="titileDate"
          :title="'各单位入园车辆榜单'"
          @loadingMore="loadingMore"
        />-->
    </div>
    <vehicleWaring />
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import PaddingCom from "components/paddingCom";
import VehiceleCom from "components/vehicleCom";
import publicInput from "components/publicInput";
import timeInput from "components/timeInput";
import ParkCar from "components/echarts/parkCar";
import parkdwCar from "components/echarts/parkdwCar";
import parkdwList from "components/listable/index";
import vehicleWaring from "components/vehiclemanage/vehicleWaring";
import FOURCONCOR from "components/fourCorner";
import { companycarinoroutbar } from "api/zdh";
import { companycarinoroutlist } from "api/zdh";
import { carstatsbytype } from "api/zdh";
import timeSingleInput from "components/timeSingleInput";
export default {
  name: "VehicleTable",
  components: {
    PaddingCom,
    VehiceleCom,
    publicInput,
    timeInput,
    ParkCar,
    parkdwCar,
    vehicleWaring,
    timeSingleInput,
    parkdwList,
    FOURCONCOR,
  },
  // 定义属性
  data() {
    return {
      titileDate: [
        {
          name: "序号",
          deindex: "id",
          callBack: function (n, i) {
            return i + 1;
          },
        },
        {
          name: "企业名称",
          deindex: "name",
        },
        {
          name: "进出车辆总数",
          deindex: "value",
        },
      ],
      options: [
        {
          value: "选项12",
          label: "黄金糕23",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      carId1: "parkCarpie1",
      carId2: "parkCarpie2",
      carId3: "parkCarpie3",
      carId4: "parkCarpie4",
      linedataMore: [],
      listdata: [],
      page: 1,
      pageSize: 10,
      listCar: [],
      rylistCar: 0,
      cylistCar: 0,
      start_date: "",
      end_date: "",
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
      // 默认时间
        timeDefault () {
            let date = new Date()
            // 通过时间戳计算
            let defalutStartTime = date.getTime() - 7 * 24 * 3600 * 1000 // 转化为时间戳
            let defalutEndTime = date.getTime()
            let startDateNs = new Date(defalutStartTime) 
            let endDateNs = new Date(defalutEndTime)
            // 月，日 不够10补0
            defalutStartTime = startDateNs.getFullYear() + '-' + ((startDateNs.getMonth() + 1) >= 10 ? (startDateNs.getMonth() + 1) : '0' + (startDateNs.getMonth() + 1)) + '-' + (startDateNs.getDate() >= 10 ? startDateNs.getDate() : '0' + startDateNs.getDate())
            defalutEndTime = endDateNs.getFullYear() + '-' + ((endDateNs.getMonth() + 1) >= 10 ? (endDateNs.getMonth() + 1) : '0' + (endDateNs.getMonth() + 1)) + '-' + (endDateNs.getDate() >= 10 ? endDateNs.getDate() : '0' + endDateNs.getDate())
            return [defalutStartTime, defalutEndTime]
        },
    timeDate1(value) {
      this.getCompanycar(value);
    },
 
    timeDate(value) {
     //console.log("我椒value",value)
      this.start_date = value[0];
      this.end_date = value[1];
      this.getCarstatsbytype();
    },
    // 各单位入园车辆榜单
    async getCompanycarInoroutlist() {
      let res = await companycarinoroutlist({
        page: this.page,
        pageSize: this.pageSize,
      });
      if (this.$iscode(res)) {
        const {
          data: { list = [] },
        } = res;
        list.length && (this.listdata = this.listdata.concat(list));
      }
    },
    // 加载更多
    loadingMore() {
      this.page += 1;
      this.getCompanycarInoroutlist();
    },
    changeBoxShow() {
      this.$emit("showbox", false);
    },
    // 获取园区各单位车辆管理
    async getCompanycar(date) {
      this.linedataMore = [];
      let res = await companycarinoroutbar({ date });
      if (this.$iscode(res)) {
        const { data } = res;
        this.linedataMore.push(data);
        //console.log(this.linedataMore);
      }
    },
    //
    async getCarstatsbytype() {
      this.listCar = [];
      if (this.start_date == "" && this.end_date == "") {
        let res = await carstatsbytype();
        if (this.$iscode(res)) {
          const {
            data: { list = [] },
          } = res;
          list.length && (this.listCar = this.listCar.concat(list));
        }
      } else {
        let res = await carstatsbytype({
          start_date: this.start_date,
          end_date: this.end_date,
        });
        if (this.$iscode(res)) {
          const {
            data: { list = [] },
          } = res;
          list.length && (this.listCar = this.listCar.concat(list));
        }
      }
    },
    formatDateTime(date) {
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var minute = date.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;
      var second = date.getSeconds();
      second = second < 10 ? "0" + second : second;
      return y + "-" + m + "-" + d;
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getCompanycarInoroutlist();

    this.getCompanycar(this.formatDateTime(new Date()));
    this.timeDate(this.timeDefault());
    // this.getCarstatsbytype();
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="scss" scoped>
.VehicleTable {
  width: 100%;
}
.carManag {
  display: flex;
  justify-content: space-between;
  p {
    font-size: 23px;
  }
}
.park {
  padding: 0.83vw 0 0 0;
    height:0;
  padding-bottom:27%;
  display: flex;
  justify-content: space-between;
  width: 100%;
  div {
    width: 100%;
  }
  p {
    text-align: center;
    font-size: 0.52vw;
    margin-top: 0.23vw;
  }
}
.el-divider--horizontal {
  margin: 0;
  margin: 0.8vw 0 0.76vw 0;
  background: #499be7;
}
.manageorLsit {
  display: flex;
  justify-content: space-between;
}
.indexList {
  height: 6vw;
}
/deep/.happy-scroll-container .happy-scroll-content {
  display: inline-block;
  width: 97%;
}
// /deep/ .text{
//   font-size: 23px;
// }
</style>
